<template>
  <div>
    <div class="item" v-for="item in datas" :key="item.ID">
      <h3 class="header">{{ item.title }}</h3>
      <p class="content">{{ item.content }}</p>
    </div>
  </div>
</template>

<script lang="ts">
import { onMounted, onUnmounted } from 'vue';
import { defineComponent, ref } from 'vue';
import axios from 'axios';

export default defineComponent({
  setup() {
    //滚动事件处理函数
    function scrollHandle() {
      const scrollHeight = document.body.scrollHeight;
      const scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
      const clientHeight = document.documentElement.clientHeight;
      const distance = scrollHeight - scrollTop - clientHeight;

      if (distance <= 200) {
        console.log('快到底了！');
        loadMore(); //多次触发没关系，加载完之前只能有一个实际执行
      }
    }

    onMounted(() => {
      window.addEventListener('scroll', scrollHandle, false);
    });
    onUnmounted(() => {
      window.removeEventListener('scroll', scrollHandle, false);
    });

    const datas = ref([]);

    let readyForLoad = true; //默认允许加载一次

    loadMore(); //初始加载一次
    function loadMore() {
      if (readyForLoad) {
        //需要加载才进来，防止重复
        readyForLoad = false; //进来了就"锁上"

        axios('../../public/datas.json').then((res) => {
          datas.value = [...datas.value, ...res.data];
          readyForLoad = true; //加载完了才"开锁"，允许再次触发
        });
      }
    }

    return {
      datas = [
        {
          ID: 1,
          title: '深夜突发！多个航班无法降落，疑因有不明飞行器活动',
          content:
            '记者从民航爱好者常使用的一款飞机轨迹查询软件看到，4日晚的确有多趟航班在抵达杭州萧山国际机场前在空中进行了盘旋等待，或备降到了周边的宁波栎社国际机场。'
        },
        {
          ID: 2,
          title: '湖州长兴有家公司破产资产2亿元起拍，背后有一个“最快跌落的中国首富”的身影',
          content:
            '是的，“汉能”，“汉能薄膜”在2013年和2014年间曾经是港股里最看不懂的“妖股”，而它的创始人李河君在2015年3月以1600亿的身家荣登中国首富，不过仅仅3个月，其身家就暴跌1000亿，被称为最快跌落的首富。'
        }
      ] //输出到页面中使用
    };
  }
});
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
} /* scoped-局部样式 */
.item {
  box-sizing: border-box;
  width: 350px;
  height: 180px;
  padding: 20px 20px;
  background: #fff;
  border: 1px solid #ccc;
  margin-bottom: -1px; /* 上下边框合并一下 */
}
.header {
  /* margin-bottom: 20px; */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  line-height: 30px;
}
.content {
  color: #999;
  font-size: 14px;
  line-height: 26px;
  height: 78px;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 3;
}
</style>
